<template>
    <div class="dropdown" ref="dropDownRef">
        <a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen">
            {{ title }}
        </a>
        <ul class="dropdown-menu" style="display:block" v-if="isOpen">
           <slot></slot>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { defineProps,ref,watch} from 'vue';
import useClickOutside from '@/hooks/useClickOutside';
defineProps({
    title: {
        type: String,
        required: true
    }
})
const isOpen = ref(false)
const toggleOpen = () => {
    isOpen.value = !isOpen.value
}
//创建一个ref对象，通过ref属性获取绑定的dom元素
const dropDownRef = ref(null)
//通过调用hooks里面的函数进行处理，通过isCLickOutside的值来决定isOpen的值。
const isClickOutside = useClickOutside(dropDownRef)
watch(isClickOutside, () => {
    //若点击的点为外部区域且菜单栏展开，则设置菜单栏关闭
    if (isClickOutside.value && isOpen.value) {
        isOpen.value = false
    }
})
</script>

<style>

</style>